<template>
  <div>
 <!-- 主体部分 -->
 <div class="home-main">
  <div class="main">
    <section class="banner">
      <ul>
        <li><img src="./images/hotel-banner.jpg" alt="banner"></li>
      </ul>
    </section>
    <!-- 关于 -->
    <section class="about">
      <h1 class="title">WELCOME TO XXX HOTEL</h1>
      <p class="content">
        纽曼公司创立于1996年，现有员工2000余人，是一家集研发、制造、销售、服务为一体的中国高新技术企业。公司研发及生产体系健全，拥有湖南、北京和深圳三大中心。经过17年的发展，凭借强大的研发力量及资源整合能力，纽曼已拥有目前中国数码行业较为完整产品体系。产品跨越专业及消费数码产品领域。
      </p>
      <article>
        <div class="box">
          <img src="img/index-cultural01.png" width="44" height="44">
          <h2>CULTURAL <div>企业文化</div>
          </h2>
          <p>优秀的企业文化能给企业注入蓬勃的活力，是企业的灵魂。纽曼十分注重自身企业文化建设，将企业文化的精髓传递给每一位员工。</p>
        </div>
        <div class="box">
          <img src="img/index-cultural02.png" width="44" height="44">
          <h2>HONOUR <div>企业荣誉</div>
          </h2>
          <p>纽曼历年来坚持不懈地努力，以品质求生存，以创新谋发展，从而打造出众多经典产品，得到了用户以及行业媒体的普遍肯定与褒奖。</p>
        </div>
        <div class="box">
          <img src="img/index-cultural03.png" width="44" height="44">
          <h2>QUALIFICATION <div>资格认证</div>
          </h2>
          <p>纽曼长期以来将科学化管理放在首位，并将产品质里视为企业命脉，经过长期不懈的系统化学习和实践，逐步通过了IS09001质里管理体系认证。</p>
        </div>
        <div class="box">
          <img src="img/index-cultural04.png" width="44" height="44">
          <h2>RESEARCH <div>研究开发</div>
          </h2>
          <p>纽曼一直以来把产品技术研发创新作为产品的核心竞争力，组建了一支专业的、国际化的研发团队，拥有专业研发技术人员近300名。</p>
        </div>
      </article>
    </section>
    <!-- 消息 -->
    <section class="news">
      <h1 class="title">NEWS CENTER</h1>
      <p class="content">纽曼品牌数年来培育了数千万忠实用户，特别是得到了中国广大年轻用户的喜爱和认可，纽曼公司拥有一大批经验丰富的市场和品牌推广团队，每年拥有数千万的市场和品牌推广资金。</p>
      <article>
        <div class="box1">
          <img src="img/news01.png">
          <div>AWE2016开幕，企业巨头竞相争艳，大咖云集</div>
        </div>
        <div class="box2">
          <div class="hot">
            <div class="date">
              <div class="day">15</div>
              <div class="year">2016-03</div>
            </div>
            <div class="text">
              <h3><a href="">AWE2016开幕，企业巨头竞相争艳，大咖云集</a></h3>
              <p>
                2016年3月9日9:30，由中国家电协会主办的中国家电及消费电子博览会—上海2016在上海新国际博览中心隆重开幕。在这个全球瞩目、亚太区最大规模的家电展会上
              </p>
            </div>
          </div>
          <ul>
            <li class="first"><a href="">· 三大“黑科技”锁定中国消费者的心<time>2016-03-15</time></a></li>
            <li><a href="">· 正品控宣言：让商品拥有独一无二的身份证<time>2016-03-15</time></a></li>
            <li><a href="">· 2016AWE：方太最全智能嵌入式厨电套系亮相<time>2016-03-15</time></a></li>
            <li><a href="">· 美的焖香鼎釜IH智能电饭煲全球首发 <time>2016-03-15</time></a></li>
            <li><a href="">· AWE2016盛大开幕 释放家电业“引力波” <time>2016-03-14</time></a></li>
            <li><a href="">· 2016年中国家电发展高峰论坛文字实录 <time>2016-03-14</time></a></li>
          </ul>
        </div>
      </article>
    </section>
  </div>

 </div>
  </div>
</template>

<script>
import OSS from 'ali-oss'
export default {
  name: 'HotelSystemHomeMain',

  data () {
    return {

    }
  },

  mounted () {
    this.initAliOss()
  },

  methods: {
    initAliOss () {
      const client = new OSS({
        region: 'your-region',
        accessKeyId: 'LTAI5t9K6T3z3iyebtLeq1sT',
        accessKeySecret: '87WpF5rQWTcYSILucjlaMkx5hW6GWv',
        bucket: 'your-bucket-name'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home-main {

  height: 1300px;
  margin: 0 auto;
  .main {
   width: 1200px;
   height: 300px;
   margin: 0 auto;

   .banner ul {
       width: 100%;
       li {
           img {
               max-width: 100%;
               width: 100%;
               height: 400px;
           }
       }
   }

   // 关于
   section {
       margin-bottom: 20px;
       display: block;
       text-align: center;
   }

   section .title {
       margin-bottom: 30px;
   }

   section p {
       font-size: 14px;
       color: #666666;
   }

   article {
       display: flex;
   }

   .about {
       width: 1200px;
       margin: 0 auto;
       margin-bottom: 30px;
   }

   .content {
       width: 1020px;
       margin: 0 auto;
   }

   .about h1 {
       line-height: 40px;
   }

   .title:after {
       content: "";
       background-color: #01a1ff;
       display: block;
       width: 40px;
       height: 4px;
       margin: 0 auto;
   }

   .about .box {
       width: 21%;
       float: left;
   }

   .about .box {
       margin: 20px;
   }

   .about .box h2 {
       margin-bottom: 30px;
   }

   .about .box div {
       color: #666666;
       font-size: 16px;
   }

   .about .box img {
       margin-left: 100px;
       margin-bottom: 50px;
       margin-top: 50px;
   }

   // 消息
   .news {
       width: 1200px;
       margin: 0 auto;
       margin-bottom: 40px;
   }

   .news .content {
       margin-bottom: 30px;
   }

   .box1 {
       position: relative;
       width: 50%;
       height: 300px;
   }

   .box1 img {
       height: 292px;
       margin-left: 28px;
   }

   .box1 div {
       font-size: 14px;
       position: absolute;
       left: 28px;
       bottom: 8px;
       color: #ffffff;
       width: 525px;
       height: 40px;
       line-height: 40px;
       background-color: #00aaff;
   }

   .box2 {
       width: 50%;
   }

   .box2 .hot {
       overflow: hidden;
       height: 85px;
       margin-bottom: 2px;
   }

   .box2 .date {
       width: 10%;
       height: 100px;
       float: left;
   }

   .box2 .date .day {
       font-size: 25px;
       padding: 10px;
       border: 1px #00aaff solid;
       font-weight: bolder;
       color: #00aaff;
   }

   .box2 .date .year {
       height: 20px;
       line-height: 20px;
       font-size: 12px;
       background-color: #00aaff;
       color: #ffffff;
   }

   .text {
       width: 50%;
       float: left;
       margin-left: 10px;
       text-align: left;
   }

   .text p {
       width: 550px;
       text-align: left;
       padding-top: 5px;
       font-size: 10px;
       color: #949494;
       -webkit-transform-origin-x: 0;
       transform: scale(0.89);
   }

   .text h3 a {
       color: #00aaff;
   }

   .box2 ul {
       width: 50%;
       position: relative;
   }

   .box2 .first {
       border-top: 1px #9f9f9f dashed;
   }

   .box2 li {
       width: 549px;
       text-align: left;
       line-height: 33px;
       border-bottom: 1px #9f9f9f dashed;
   }

   .box2 a {
       color: #666666;
   }

   .box2 li time {
       position: absolute;
       right: -250px;
   }
 }
 }
</style>
